<template>
    <div>
        <a-row>
            <!-- v-userAuth="'F2'" -->
            <a-row class='mytitle'>
                <div style="cursor: pointer;width: 360px" @click="handleClose">
                    <a-icon type="left" />
                    <span>{{ $t('返回') }}</span>
                    <span style="margin-left: 8px;">|</span>
                    <span style="margin-left: 8px">{{ $t('文件系统') }}</span>
                    <span style="margin-left: 8px;">/</span>
                    <span style="margin-left: 8px">{{ $t('创建配额') }}</span>
                </div>
            </a-row>

            <a-row style="margin:1em">
                <a-card hoverable>
                    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol"
                        :wrapper-col="wrapperCol">
                        <a-spin :spinning="loading">
                            <a-form-model-item :label="$t('目录选择') + ':'" prop="dir_name">
                                <a-input style="width:480px;" v-model="form.dir_name" :placeholder="$t('请输入或选择目录路径')" />
                                <a-button style="margin-left: 16px;" type='primary' @click="handleChoose">
                                    <Iconfont class="icon button-icon-style" type="icon-view16f"></Iconfont>
                                    {{ $t('浏览') }}
                                </a-button>
                            </a-form-model-item>

                            <a-form-model-item prop="create" style="margin-left: 8.33333333%">
                                <a-checkbox v-model="form.create">
                                    {{ $t('如果目录不存在，则创建新目录') }}
                                </a-checkbox>
                            </a-form-model-item>

                            <a-form-model-item style="margin-top: -8px;" :label="$t('配额类型') + ':'" prop="type">
                                <a-radio-group v-model="form.type" @change="quotaChange">
                                    <a-radio v-for="item of typeGroup" :value="item.value" :key="item.value">{{ item.label
                                    }}</a-radio>
                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item v-if="form.type == 2 || form.type == 3" style="margin-top: -8px;" :label="$t('配额方式') + ':'" prop="type">
                                <a-radio-group v-model="form.mode">
                                    <a-radio :value="1">{{ $t('用户子目录配额') }}</a-radio>
                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item v-if="form.type == 2" :label="$t('用户类型') + ':'" prop="utype">
                                <a-radio-group v-model="form.utype" @change="typeChange">
                                    <a-radio v-for="item of userGroup1" :value="item.value" :key="item.value">{{ item.label
                                    }}</a-radio>
                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item v-if="form.type == 2 || form.type == 3" style="margin-left: 8.33333333%"  prop="objs">
                                <a-transfer :data-source="transferList" show-search :filter-option="filterOption"
                                    :target-keys="targetKeys" :render="item => item.title" @change="handleChange"
                                    @search="handleSearch" />
                            </a-form-model-item>


                            <a-form-model-item :label="$t('容量配额数') + ':'">
                                <div style="display: flex;align-items: center;">
                                    <div>
                                        <span>{{ $t('硬配额') }}：</span>
                                        <a-input-number style="width:248px;" v-model="form.max_bytes" :min="0" :max="byteMax"
                                            :placeholder="$t('Enter') + $t('容量配额数')" :parser="value =>value.match(/^[0-9]*\.([0-9]{0,2})|^[0-9]*/)[0]" :precision="0"  />
                                    </div>
                                    <a-select style="width:248px;margin-left: 16px;" v-model="form.byte_unit"
                                        :placeholder="$t('Choose') + $t('单位')" @change="handleByteUnit">
                                        <a-select-option v-for="item of capacityList" :value="item.value" :key="item.value">
                                            {{ item.label }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </a-form-model-item>

                            <a-form-model-item :label="$t('文件配额数') + ':'" prop="max_files">
                                <div style="display: flex;align-items: center;">
                                    <div>
                                        <span>{{ $t('硬配额') }}：</span>
                                        <a-input-number style="width:248px;" v-model="form.max_files" :min="0" :max="fileMax"
                                            :placeholder="$t('Enter') + $t('文件配额数')" :precision="0" />
                                    </div>
                                    <a-select style="width:248px;margin-left: 16px;" v-model="form.file_unit"
                                        :placeholder="$t('Choose') + $t('单位')" @change="handleFileUnit">
                                        <a-select-option v-for="item of fileList" :value="item.value" :key="item.value">
                                            {{ item.label }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </a-form-model-item>

                            <a-form-model-item :wrapper-col="{ span: 4, offset: 2 }">
                                <a-button type="primary" @click="onSubmit">
                                    {{ $t('Save') }}
                                </a-button>
                                <a-button style="margin-left: 10px;" @click="handleClose">
                                    {{ $t('Cancel') }}
                                </a-button>
                            </a-form-model-item>
                        </a-spin>

                    </a-form-model>
                </a-card>
            </a-row>

        </a-row>

        <chooseDirectory ref="directoryRef" @choose-directory="handleDirectory" @current-directory="handleCurrent" />

    </div>
</template>
<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'
import chooseDirectory from '../directory/chooseDirectory.vue'

export default {
    components: { EmptyData, NoAuthPage, chooseDirectory },
    data() {
        return {
            loading: false,
            labelCol: { span: 2 },
            wrapperCol: { span: 20 },
            form: {
                dir_name: '',
                create: false,
                type: 1,
                utype: 1,
                objs: [],
                max_files: '',
                max_bytes: '',
                file_unit: 1,
                byte_unit: 1,
                mode: 1,
            },
            rules: {
                dir_name: [
                    { required: true, validator: (rules, value, callback) => { this.pathValidator(rules, value, callback) }, trigger: 'blur' },
                ],
                type: [
                    { required: true, message: this.$t('Choose') + this.$t('配额类型'), trigger: 'change' },
                ],
                utype: [
                    { required: true, message: this.$t('Choose') + this.$t('用户类型'), trigger: 'change' },
                ],
                // objs: [
                //     { required: true, validator: (rules, value, callback) => { this.infoValidator(rules, value, callback) }, trigger: 'change' },
                // ],
            },
            typeGroup: [
                { value: 1, label: '目录' },
                { value: 2, label: '用户' },
                { value: 3, label: '用户组' },
            ],
            userGroup1: [
                { value: 1, label: '本地用户' },
                { value: 2, label: 'AD用户' },
            ],
            userGroup2: [
                { value: 2, label: 'AD用户' },
            ],
            capacityList: [
                { value: 1, label: 'MB' },
                { value: 2, label: 'GB' },
                { value: 3, label: 'TB' },
                { value: 4, label: 'PB' },
            ],
            fileList: [
                { value: 1, label: '个' },
                { value: 2, label: '万' },
                { value: 3, label: '亿' },
            ],
            ADList: [
                { value: 1, label: '1' },
                { value: 2, label: '2' },
                { value: 3, label: '3' },
            ],
            ADUserList: [],
            sambaUserList: [],
            ADGroupList: [],
            transferList: [],
            targetKeys: [],
            directory: '',
            id: '',
            level: '',
            byteMax: 1024,
            fileMax: Math.pow(10, 18),
            sambaMap: new Map([]),
            adMap: new Map([]),
            adGroupMap: new Map([]),
        }
    },
    async mounted() {
        await this.getSambaList()
        await this.getADUserList()
        await this.getADGroupList()
        this.form.dir_name = this.$route.query.name
        this.transferList = this.sambaUserList
    },
    methods: {
        // async getADList() {
        //     const { data } = await this.$api.authentication.getAuthentication()
        //     this.ADList = data.ad_list
        // },
        async getSambaList() {
            this.loading = true
            const { data } = await this.$api.samba.getSambaApi()
            this.sambaUserList = data.samba_user.map((item, index) => ({ key: item.id + '', title: item.username, chosen: false }))
            this.loading = false
        },
        async getADUserList() {
            this.loading = true
            const { data } = await this.$api.authentication.getUser({ id: '1' })
            this.ADUserList = data.user.map((item, index) => ({ key: item.user_id + '', title: item.user_name, chosen: false }))
            this.loading = false
        },
        async getADGroupList() {
            this.loading = true
            const { data } = await this.$api.authentication.getUserGroup({ id: '1' })
            this.ADGroupList = data.user.map((item, index) => ({ key: item.id + '', title: item.department, chosen: false }))        
            this.loading = false
        },
        quotaChange(value) {
            if (this.form.type == 3) {
                this.form.utype = 2
                this.transferList = this.ADGroupList
            } else if (this.form.type == 2 && this.form.utype == 1) {
                this.transferList = this.sambaUserList
            } else if (this.form.type == 2 && this.form.utype == 2) {
                this.transferList = this.ADUserList
            }
            this.form.objs = []
            this.targetKeys = []
        },
        typeChange() {
            this.form.objs = []
            this.targetKeys = []
            if (this.form.utype == 1) this.transferList = this.sambaUserList
            else if (this.form.utype == 2) this.transferList = this.ADUserList
        },
        handleChoose() {
            this.$refs.directoryRef.isShow = true
            if (this.id) this.$refs.directoryRef.test(this.directory, this.id, this.level)
        },
        handleCurrent(item, id, level) {
            this.directory = item
            this.id = id
            this.level = level
        },
        handleDirectory(path) {
            this.form.dir_name = path
            this.$refs.ruleForm.validateField(['dir_name'])
        },
        handleCreate() {
            this.$refs.createRef.isShow = true
        },
        handleByteUnit(value) {
            if (value == 4) this.byteMax = 888 
            else this.byteMax = 1024
        },
        handleFileUnit(value) {
            if (value == 1) this.fileMax = Math.pow(10, 18)
            else if (value == 2) this.fileMax = Math.pow(10, 14)
            else if (value == 3) this.fileMax = Math.pow(10, 10) 
        },
        onSubmit() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const byteMap = new Map([
                        [1, Math.pow(1024, 2)],
                        [2, Math.pow(1024, 3)],
                        [3, Math.pow(1024, 4)],
                        [4, Math.pow(1024, 5)],
                    ])
                    const fileMap = new Map([
                        [1, Math.pow(1, 1)],
                        [2, Math.pow(10, 4)],
                        [3, Math.pow(10, 8)],
                    ])
                    const params = {
                        max_bytes: this.form.max_bytes * byteMap.get(this.form.byte_unit),
                        max_files: this.form.max_files * fileMap.get(this.form.file_unit),
                        objs: this.form.objs.map(Number),
                    }
                    const item = { ...this.form, ...params }
                    if (!item.max_bytes && !item.max_files) {
                        this.$message.error('容量配额 和 文件数配额 至少要配置其中一个')
                    } else if (item.objs.length == 0 && item.type !== 1) {
                        this.$message.error(this.$t('Choose') + this.$t('共享用户(组)'))
                    } else {
                        const { data } = await this.$api.directory.appendQuotaListApi(item)
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                        if (data.flag == '0') this.$router.push({ path: '/fsview' })
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        filterOption(inputValue, option) {
            return option.title.indexOf(inputValue) > -1;
        },
        handleChange(targetKeys, direction, moveKeys) {
            this.targetKeys = targetKeys;
            this.form.objs = targetKeys
        },
        handleSearch(dir, value) {
            console.log('search:', dir, value);
        },
        // infoValidator(rule, value, callback) {
        // if (value.length === 0) callback(this.$t('Choose') + this.$t('共享用户(组)'))
        //     else callback()
        // },
        handleClose() {
            this.$router.push({ path: '/fsview' })
        },
        pathValidator(rule, value, callback) {
            if (value == '') callback(this.$t('Choose') + this.$t('目录路径'))
            // if (value == '/') callback()
            else {
                const reg = /^(\/[\w.-]+)+\/?$/
                if (!reg.test(value)) callback(this.$t('Choose') + this.$t('请输入或选择目录路径'))
                else callback()
            }
        },
    }
}
</script>


<style scoped>
.title {
    color: #666666;
}

.size14 {
    font-size: 14px;
}

.line {
    width: 100%;
    border-bottom: solid 1px #cccccc;
    line-height: 0.9;
}

.shallow {
    color: #666666;
}

.mt-7 {
    margin-top: 7px;
}

.cont {
    color: #333333;
    font-weight: bolder;
}

::v-deep .ant-transfer-list {
    height: 260px;
    width: 260px;
}
</style>
